<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="<%=basePath%>backstage/css/H-ui.min.css" rel="stylesheet"
	type="text/css" />
<link href="<%=basePath%>backstage/css/H-ui.admin.css" rel="stylesheet"
	type="text/css" />
<link href="<%=basePath%>backstage/lib/icheck/icheck.css"
	rel="stylesheet" type="text/css" />
<link href="<%=basePath%>backstage/lib/Hui-iconfont/1.0.6/iconfont.css"
	rel="stylesheet" type="text/css" />
<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.css"
	rel="stylesheet" type="text/css" />
<link href="lib/region/css/city-picker.css" rel="stylesheet"
	type="text/css" />
<link href="lib/webuploader/0.1.5/webuploader.css" rel="stylesheet"
	type="text/css" />
<!-- <link href="lib/region/css/main.css" rel="stylesheet" type="text/css" /> -->
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<link href="<%=basePath%>backstage/css/common.css" rel="stylesheet"
	type="text/css" />
<link href="<%=basePath%>backstage/css/style.css" rel="stylesheet"
	type="text/css" />
<title>添加文章</title>
</head>
<body>
	<div class="pd-20">
		<form action="<%=path%>/backstage/document_addorUpdate" method="POST"
			class="form form-horizontal" id="form-u_article-add"
			onsubmit="before_submit()">
			<input type="hidden" name="id" value="${article.id}" /> <input
				type="hidden" id="article_type" name="article_type"
				value="${article.article_type}" />

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">标题：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<input type="text" class="input-text" value="${article.title}"
						placeholder="" id="" name="title" datatype="*" nullmsg="不能为空">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">目录：</label>
				<div id="cat_select_div" class="formControls col-xs-8 col-sm-5">
					<select name="cate_id" class="select">
						<option value="0">选择目录</option>
						<c:forEach items="${document_cates}" var="cate">
							<option
								<c:if test="${article.cate_id==cate.id}">selected="selected"</c:if>
								value="${cate.id}">${cate.cate_name}</option>
						</c:forEach>
					</select>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">适应年龄：</label>
				<div class="formControls col-xs-8 col-sm-5">
					年龄上限: <input type="text" required class="input-text"
						style="width: 100px;" placeholder="" id=""
						value="${!empty article.apl_up?article.apl_up:-36500}"
						name="apl_up" datatype="*" nullmsg="不能为空">（天）
					&nbsp;&nbsp;年龄下限: <input type="text" required class="input-text"
						style="width: 100px;" placeholder="" id=""
						value="${!empty article.apl_down?article.apl_down:36500}"
						name="apl_down" datatype="*" nullmsg="不能为空">（天）
				</div>
			</div>

			<!-- 获取图片地址-->

			<div class="row cl">
				<input type="hidden" id="img1" name="img1" value="${article.img1}" />
				<label class="form-label col-xs-4 col-sm-3">缩略图1：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<div class="uploader-thum-container">
						<div id="fileList" class="uploader-list">
							<c:if test="${!empty article.img1}">
								<div class="file-item thumbnail upload-state-done">
									<img style="width: 200px; height: 200px;" src="${article.img1}" />
									<div class="info"></div>
								</div>
							</c:if>
						</div>
						<div id="filePicker">选择图片</div>
					</div>
				</div>
			</div>

			<!-- 获取图片地址-->
			<div class="row cl">
				<input type="hidden" id="img2" name="img2" value="${article.img2}" />
				<label class="form-label col-xs-4 col-sm-3">缩略图2：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<div class="uploader-thum-container">
						<div id="fileList2" class="uploader-list">
							<c:if test="${!empty article.img2}">
								<div class="file-item thumbnail upload-state-done">
									<img style="width: 200px; height: 200px;" src="${article.img2}" />
									<div class="info"></div>
								</div>
							</c:if>
						</div>
						<div id="filePicker2">选择图片</div>
					</div>
				</div>
			</div>

			<!-- 获取图片地址-->
			<div class="row cl">
				<input type="hidden" id="img3" name="img3" value="${article.img3}" />
				<label class="form-label col-xs-4 col-sm-3">缩略图3：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<div class="uploader-thum-container">
						<div id="fileList3" class="uploader-list">
							<c:if test="${!empty article.img3}">
								<div class="file-item thumbnail upload-state-done">
									<img style="width: 200px; height: 200px;" src="${article.img3}" />
									<div class="info"></div>
								</div>
							</c:if>
						</div>
						<div id="filePicker3">选择图片</div>
					</div>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">描述：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<input type="text" required class="input-text" placeholder="" id=""
						name="description" datatype="*" value="${article.description}"
						nullmsg="不能为空">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">序值：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<input type="text" required class="input-text" placeholder=""
						name="sort" value="${!empty article.sort?article.sort:1000}"
						datatype="*" nullmsg="不能为空">
				</div>
			</div>

			<div class="row cl">
				<!--提交前获取编辑器内容-->
				<input type="hidden" id="content" name="content"
					value="${article.content}" datatype="*" nullmsg="不能为空"> <label
					class="form-label col-xs-4 col-sm-3">内容：</label>
				<div class="formControls col-8">
					<script id="editor" type="text/plain"></script>
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3">作者：</label>
				<div class="formControls col-xs-8 col-sm-5">
					<input type="text" class="input-text" value="${article.author}"
						placeholder="" id="" name="author" datatype="*" nullmsg="不能为空">
				</div>
			</div>

			<div class="row cl">
				<label class="form-label col-xs-4 col-sm-3"></label>
				<div class="formControls col-xs-8 col-sm-5">
					<button onClick="u_article_save_submit();"
						class="btn btn-primary radius" type="submit">保存并提交</button>
					<!-- <button onClick="layer_close();" class="btn btn-default radius"
					type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button> -->
				</div>
			</div>
		</form>
	</div>
	</div>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/layer/2.1/layer.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/My97DatePicker/WdatePicker.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/icheck/jquery.icheck.min.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/Validform/5.3.2/Validform.min.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/lib/webuploader/0.1.5/webuploader.min.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/ueditor.config.js"></script>
	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/ueditor.all.min.js"> </script>
	<script type="text/javascript" charset="utf-8"
		src="<%=basePath%>backstage/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>
	<script type="text/javascript" src="<%=basePath%>backstage/js/H-ui.js"></script>
	<script type="text/javascript"
		src="<%=basePath%>backstage/js/H-ui.admin.js"></script>
	<script type="text/javascript">
	function u_article_save_submit(){
		$("#form-u_article-add").Validform({
			tiptype:2,
			ajaxPost:true,
			callback:function(form){
				var index = parent.layer.getFrameIndex(window.name);
					if (index){//关闭弹出层
						parent.$('.btn-refresh').click(); 
						parent.layer.close(index);
					}else{//单独的页面
						location.href = "<%=path%>/backstage/document_articlelist";
					}
				}
			});
	}

		//初始化Ueditor
		$(function() {
			var ue = UE.getEditor('editor');

			ue.ready(function() {
				var art_content = $("#content").val();
				ue.setContent(art_content);
			})
			
			/*缩略图上传*/
			var $list = $('#fileList'),
			$list2 = $('#fileList2'),
			$list3 = $('#fileList3'),
			ratio = window.devicePixelRatio || 1,
			thumbnailWidth = 100 * ratio,
			thumbnailHeight = 100 * ratio,
			uploader,uploader2,uploader3;

			uploader = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '<%=path%>/backstage/common/uploadPic',
				pick: '#filePicker',
				accept: {
					title: 'Images',
					extensions: 'gif,jpg,jpeg,bmp,png',
					mimeTypes: 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader.on( 'fileQueued', function( file ) {
				var $li = $(
					'<div id="' + file.id + '" class="file-item thumbnail">' +
					'<img>' +
					'<div class="info">' + file.name + '</div>' +
					'</div>'
					),
				$img = $li.find('img');

				$list.html( $li );
				uploader.makeThumb( file, function( error, src ) {
					if ( error ) {
						$img.replaceWith('<span>不能预览</span>');
						return;
					}

					$img.attr( 'src', src );
				}, thumbnailWidth, thumbnailHeight );
			});

			uploader.on( 'uploadSuccess', function(file, response) {
				$( '#'+file.id ).addClass('upload-state-done');
				$("#img1").val(response.datas);
			});

			uploader.on( 'uploadError', function( file ) {
				var $li = $( '#'+file.id ),
				$error = $li.find('div.error');
				if ( !$error.length ) {
					$error = $('<div class="error"></div>').appendTo( $li );
				}

				$error.text('上传失败');
			});

			uploader.on( 'uploadComplete', function( file ) {
				$( '#'+file.id ).find('.progress').remove();
			});

			/*图片*/
			uploader2 = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '<%=path%>/backstage/common/uploadPic',
				pick : '#filePicker2',
				accept : {
					title : 'Images',
					extensions : 'gif,jpg,jpeg,bmp,png',
					mimeTypes : 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader2
			.on(
				'fileQueued',
				function(file) {
					var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
						+ '<img>'
						+ '<div class="info">'
						+ file.name + '</div>' + '</div>'), $img = $li
					.find('img');

					$list2.html($li);
					uploader2.makeThumb(file, function(error,
						src) {
						if (error) {
							$img.replaceWith('<span>不能预览</span>');
							return;
						}

						$img.attr('src', src);
					}, thumbnailWidth, thumbnailHeight);
				});

			uploader2.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				$("#img2").val(response.datas);
			});

			uploader2.on('uploadError', function(file) {
				var $li = $('#' + file.id), $error = $li.find('div.error');
				if (!$error.length) {
					$error = $('<div class="error"></div>').appendTo($li);
				}

				$error.text('上传失败');
			});

			uploader2.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').remove();
			});
			
			/*图片*/
			uploader3 = WebUploader.create({
				auto: true,
				swf: 'lib/webuploader/0.1.5/Uploader.swf',
				server : '<%=path%>/backstage/common/uploadPic',
				pick : '#filePicker3',
				accept : {
					title : 'Images',
					extensions : 'gif,jpg,jpeg,bmp,png',
					mimeTypes : 'image/jpg,image/jpeg,image/png'
				},
				formData : {
					foldername : 'article'
				}
			});

			uploader3
					.on(
							'fileQueued',
							function(file) {
								var $li = $('<div id="' + file.id + '" class="file-item thumbnail">'
										+ '<img>'
										+ '<div class="info">'
										+ file.name + '</div>' + '</div>'), $img = $li
										.find('img');

								$list3.html($li);
								uploader3.makeThumb(file, function(error, src) {
									if (error) {
										$img.replaceWith('<span>不能预览</span>');
										return;
									}

									$img.attr('src', src);
								}, thumbnailWidth, thumbnailHeight);
							});

			uploader3.on('uploadSuccess', function(file, response) {
				$('#' + file.id).addClass('upload-state-done');
				$("#img3").val(response.datas);
			});

			uploader3.on('uploadError', function(file) {
				var $li = $('#' + file.id), $error = $li.find('div.error');
				if (!$error.length) {
					$error = $('<div class="error"></div>').appendTo($li);
				}

				$error.text('上传失败');
			});

			uploader3.on('uploadComplete', function(file) {
				$('#' + file.id).find('.progress').remove();
			});

		});

		function before_submit() {
			//获取内容
			var ue = UE.getEditor('editor');
			var editor_content = ue.getContent();
			$("#content").val(editor_content);
			return true;
		}
	</script>
</body>
</html>

